<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:insert="~{include :: header('在线用户列表')}" />
	<th:block th:insert="~{include :: bootstrap-table-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
	<div class="toolbar" id="toolbar" role="group">
		<form id="formId">
			<div class="form-inline">
				<a class="btn btn-danger multiple disabled mr-1" onclick="javascript:batchForceLogout()" shiro:hasPermission="monitor:online:batchForceLogout">
					<i class="fa fa-sign-out"></i> 强退
				</a>
				<input type="text" class="form-control mr-1" name="ipAddr" placeholder="登录地址"/>
				<input type="text" class="form-control mr-1" name="loginName" placeholder="登录名称"/>
				<button type="button" class="btn btn-primary mr-1" onclick="$.table.search()">
					<i class="fa fa-search"></i>
					搜索
				</button>
				<button type="button" class="btn btn-default" onclick="$.form.reset()">
					<i class="fa fa-refresh"></i>
					重置
				</button>
			</div>
		</form>
	</div>
	<table id="bootstrap-table" class="table-striped"></table>
</div>
<th:block th:insert="~{include :: footer}" />

<th:block th:insert="~{include :: bootstrap-table-js}" />
<script th:inline="javascript">
	var forceFlag = [[${@permission.hasPermi('monitor:online:forceLogout')}]];
	var prefix = "/monitor/online";

	$(function() {
		var options = {
			uniqueId: "sessionId",
			url: prefix + "/list.json",
			sortName: "lastAccessTime",
			sortOrder: "desc",
			showExport: true,
			escape: true,
			columns: [{
				checkbox: true
			},
				{
					title: "序号",
					formatter: function (value, row, index) {
						return $.table.serialNumber(index);
					}
				},
				{
					field: 'sessionId',
					title: '会话编号'
				},
				{
					field: 'loginName',
					title: '登录名称',
					sortable: true
				},
				{
					field: 'ipAddr',
					title: '主机'
				},
				{
					field: 'loginLocation',
					title: '登录地点'
				},
				{
					field: 'browser',
					title: '浏览器'
				},
				{
					field: 'os',
					title: '操作系统'
				},
				{
					field: 'status',
					title: '会话状态',
					align: 'center',
					formatter: function(value, row, index) {
						if (value == 'on_line') {
							return '<span class="badge badge-primary">在线</span>';
						} else if (value == 'off_line') {
							return '<span class="badge badge-danger">离线</span>';
						}
					}
				},
				{
					field: 'startTimestamp',
					title: '登录时间',
					sortable: true
				},
				{
					field: 'lastAccessTime',
					title: '最后访问时间',
					sortable: true
				},
				{
					title: '操作',
					align: 'center',
					width:150,
					formatter: function(value, row, index) {
						return '<a class="btn btn-danger btn-xs ' + forceFlag + '" href="javascript:void(0)" onclick="forceLogout(\'' + row.sessionId + '\')"><i class="fa fa-sign-out"></i>强退</a> ';
					}
				}]
		};
		$.table.init(options);
	});

	// 单条强退
	function forceLogout(sessionId) {
		$.modal.confirm("确定要强制选中用户下线吗？", function() {
			var data = { "ids": sessionId };
			$.operate.post(prefix + "/batchForceLogout.json", data);
		})
	}

	// 批量强退
	function batchForceLogout() {
		var rows = $.table.selectColumns("sessionId");
		if (rows.length === 0) {
			$.modal.alertWarning("请选择要强退的用户");
			return;
		}
		$.modal.confirm("确认要强退选中的" + rows.length + "条数据吗?", function() {
			var url = prefix + "/batchForceLogout.json";
			var data = { "ids": rows.join() };
			$.operate.post(url, data);
		});
	}
</script>
</body>
</html>